<template>
   <div class="list">
      <!-- <div class="list-item">
          <div class="item-img"><img src="" alt=""></div>
          <div class="item-body">
              <h1>射击馆XXX</h1>
              <p class="second-title">
                  <span>36次</span>
                  <span>2019-5-26</span>
              </p>
              <p class="guide">
                  所有的设计师和艺术家都应该珍惜手中的材料,用精准恰当的设计使得材料物尽其用，保持一种对万物的尊敬，无论它是什么。
              </p>
          </div>
      </div> -->

        <router-link
        tag="a" target="_blank"
        :to="{name: 'newsDetail', params: {id:item.id}}" 
        class="list-item"
        v-for="(item) of this.data"
        :key="item.id"
        >
            <div class="item-img"><img :src="item.url" alt=""></div>
            <div class="item-body">
                <h1>{{item.first_title}}</h1>
                <p class="second-title">
                    <span>{{item.hit}}次</span>
                    <span>{{item.create_time}}</span>
                </p>
                <p class="guide">
                    {{item.second_title}}
                </p>
            </div>
        </router-link>
            
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'

export default {
  name: 'news-list',
  components:{
   
  },
  props:{
     
     data:Array 
  },
  data () {
    return {
        name:'',
        summary:''
    }
  },
  watch:{
    data(){
       for(var i =0;i<this.data.length;i++){
                if(this.data[i].img_url!=null){
                    this.url = this.data[i].img_url.url
                    // console.log(this.url)
                    this.data[i]['url'] = this.url
                }
                
            }
            console.log()
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
 
    
  },
  methods:{
   
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.list
    
    float left 
    width 898px
    .list-item 
        display block
        overflow hidden
        background white
        height 266px
        margin-bottom 20px
        .item-img 
            float left
            width 380px
            height 226px
            margin 20px
            background black
            overflow hidden
        .item-body 
            float right
            width 460px
            margin-top 20px
            margin-right 15px
            // background red
            height 226px
.item-body>h1
    font-size 16px
    color black
.second-title>span 
    display inline-block
    font-size 14px 
    line-height 30px
    height 30px
    color #666666
    margin-left 5px
    background url('~@/assets/news-list/list1.png') no-repeat left center
    padding-left 30px
.second-title>span +span 
    background url('~@/assets/news-list/list2.png') no-repeat left center
.guide 
    margin-top 25px 
    text-align left
    font-size 12px
    color #666666
    height 134px 
    overflow hidden 
</style>
